<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="提现" left-arrow fixed @click-left="onClickLeft" right-text="提现记录" @click-right="onClickRight" />
    <div class="order_tabs">
      <van-tabs v-model="active" title-active-color="#FF6200" color="#FF6200" :border="true" class="" @change="configChange"
        :ellipsis="false">
        <van-tab v-for="(item, index) in config.configs" :title="item.title" :title-style="{
          fontWeight: 500,
          fontSize: '14px',
        }">
        </van-tab>
      </van-tabs>
    </div>
    <!-- 可提现 -->
    <div class="amt_wrap" v-if="config.configs">
      <div class="amt_title">
        <div>可提现余额</div>
        <div class="amt_btn" v-if="config.configs[active].transfer_status==1" @click="transferAccount">转账</div>
      </div>
      <div class="balance_amt">
        {{ balance }}
        <!-- {{
          config.configs && config.configs[active]
            ? config.configs[active].balance
            : 0
        }}元 -->
      </div>
    </div>
    <!-- 提现金额 -->
    <!-- <div class="withdrawal_amt">
            <div>提现金额</div>
            <div><i style="font-size: .56rem;font-weight: bold;font-style: normal;">￥</i><input type="text"
                    placeholder="请输入提现金额"><span>全部提现</span></div>
        </div> -->
    <!-- 提现账户 -->
    <!-- <div class="withdrawal_accont">
            <div class="account_title">提现账户</div>
        </div> -->
    <!-- 提现金额 -->
    <div class="withdrawal_amt">
      <div>提现金额</div>
      <div>
        <i style="font-size: .56rem;font-weight: bold;font-style: normal;">￥</i><input type="text" v-model="amount"
          placeholder="请输入提现金额" /><span @click="allWithdrawal">全部提现</span>
      </div>
    </div>
    <!-- 提现账户 -->
    <div class="withdrawal_accont">
      <div class="account_title">提现账户</div>
      <div v-if="config.accounts.length>0">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell v-for="(item, index) in config.accounts" :key="index" :title="item.name" clickable>
              <template #title>
                <div class="cell_title">
                  <img :src="item.icon" alt="" />{{
                    item.type == 1 ? "银行卡" : "支付宝"
                  }}
                </div>
              </template>
              <template #right-icon>
                <div class="cell_right"
                  :style="{ color: item.status == 0 ? '#999' : '#333' }">
                  <div class="flex-container">
                    <!-- @click="goBankCard(item.type, item.status)" -->
                    <span >{{
                      item.status == 0 ? `请绑定${item.name}` : item.account
                      }}</span>
                    <van-icon name="arrow" style="margin-right: 0.2rem;" />
                    <van-radio :name="item.type" checked-color="#FF6200" :disabled="item.status == 0"></van-radio>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="account_tip" v-else>您还没有身份认证，请去认证</div>
    </div>
    <van-button :disabled="radio === '' || amount === ''" round block type="info" native-type="submit"
      style="width: 95%;margin: 1rem auto 0.56rem auto" color="#FF6200"
      @click="showPopup = true">去提现</van-button>
    <div class="tips">
      <div class="tips_title">*温馨提示</div>
      <div class="tips_content" v-if="config.configs" v-html="config.configs[active].explained.replace(/\n/g, '<br>')">
      </div>
      <!-- 1.提现手续费 {{ active == 1 ? "10%" : "6%" }}，提现申请D+1个工作日审核
        <br />
        2.提现最低10元起，审核通过后才可进行下一笔
        <br />
        3.提现前请认真核对收款账户信息，因自身填写错误致使无法到账，由自己承担！ -->
    </div>
    <van-popup v-model="showPopup" round closeable @click-close-icon="closeClick" position="bottom"
      class="balance-pay-popup-wrap" :style="{ height: showKeyboard ? '450px' : '250px' }">
      <div class="title">确认支付</div>
      <!-- 交易密码 -->
      <div class="row border-none">
        <span class="desc">请输入支付密码:</span>
      </div>
      <div class="row border-none">
        <van-password-input :value="tradePassword" :focused="showKeyboard"
          @focus="handleShowKeyboard"></van-password-input>
        <van-number-keyboard v-model="tradePassword" :show="showKeyboard" :maxlength="maxlength"
          :hide-on-click-outside="false" @input="onPasswordInput" @delete="onPasswordDelete"
          @blur="showKeyboard = false"></van-number-keyboard>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { WITHDRAW_CONFIG, WITHDRAW_APPLY } from "@/api/mine";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
      active: 0,
      current: 0,
      radioAccount: "",
      show: false,
      payShow: false,
      cardNo: "",
      alpay: "",
      config: {},
      amount: "",
      showPopup: false,
      maxlength: 6,
      showKeyboard: false,
      tradePassword: "",
      completePassword: false,
      orderId: "",
      loading: false,
      type: 0,
      radio: "",
      balance:0,
      msg:this.$route.query.msg
    };
  },
  created() {
    // this.active=this.$route.query.id
    window.scrollTo(0, 0);
    this.initData();
    localStorage.removeItem("bindInfo");
  },
  methods: {
    initData() {
      this.$http.get(WITHDRAW_CONFIG).then((res) => {
        this.config = res.data;
        this.radio=res.data.accounts[0].type
        this.type = this.config.configs[this.active].type;
        this.balance=this.config.configs[this.active].balance+'元'
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      this.$router.push({ path: "/withdrawalRecord" });
    },
    // 点击切换tab
    configChange(index) {
      //   console.log(index);
      this.type = this.config.configs[index].type;
      this.balance=this.config.configs[index].balance+'元'
    },
    allWithdrawal() {
      this.amount = this.config.configs[this.active].balance;
    },
    // 详情
    goBankCard(id, status) {
      let filteredAccounts = this.config.accounts.filter(account => account.type === id);
      localStorage.setItem("bindInfo", JSON.stringify(filteredAccounts));
      this.$router.push({ path: "/bindAccount", query: { id: id } });
    },
    handleShowKeyboard() {
      this.tradePassword = "";
      this.completePassword = false;
      this.showKeyboard = true;
    },
    onPasswordInput(t) {
      (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
        this.tradePassword.length !== this.maxlength ||
        this.completePassword ||
        ((this.completePassword = !0), this.onSubmit());
    },
    onPasswordDelete() {
      this.tradePassword &&
        ((this.tradePassword = this.tradePassword.slice(
          0,
          this.tradePassword.length - 1
        )),
          (this.completePassword = this.tradePassword.length === this.maxlength));
    },
    closeClick() {
      this.showPopup = false;
      this.tradePassword = "";
      this.completePassword = "";
    },
    // 转账
    transferAccount(){
      let transfer={
        title:this.config.configs[this.active].transfer_title,
        type:this.config.configs[this.active].type,
        balance:this.config.configs[this.active].balance
      }
      localStorage.setItem('config',JSON.stringify(this.config.configs))
      localStorage.setItem('transfer',JSON.stringify(transfer))
      this.$router.push({ path: "/transferAccount"});
    },
    onSubmit() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let params = {
        type: this.type,
        amount: this.amount,
        account_type: this.radio,
        pay_password: this.tradePassword,
      };
      this.$http
        .post(WITHDRAW_APPLY, params)
        .then(() => {
          this.loading = false;
          this.showPopup = false;
          this.$toast.success("提现成功");
          this.radio = "";
          this.amount = "";
          this.pay_password = "";
          this.tradePassword = "";
          this.completePassword = "";
          //   this.$emit('refreshData');
          this.initData();
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  min-height: calc(100vh - 46px);
  padding-top: 46px;

  // background: #f5f5f5;
  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }

  ::v-deep .van-nav-bar__text {
    color: #333333;
  }
}

.order_tabs {
  ::v-deep .van-tabs__line {
    z-index: 0 !important;
  }
}
.account_tip{
  text-align: center;
  font-size: .28rem;
  color:red
}
.amt_wrap {
  width: 95%;
  margin: 0.32rem auto;
  // border: 1px solid #999;
  color: #fff;
  border-radius: 0.1rem;
  padding: 0.32rem;
  box-sizing: border-box;
  font-size: 0.28rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  line-height: 0.4rem;
  font-style: normal;
  background: url("../../../images/mine/img_beij5.png") no-repeat;
  background-position: center;
  background-size: cover;
.amt_title{
  display: flex;
  justify-content: space-between;
  .amt_btn{
    width: 68px;
height: .56rem;
background: #FFFFFF;
border-radius: .3rem;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: .28rem;
color: #F32A23;
line-height: .56rem;
text-align: center;
font-style: normal;
  }
}
.balance_amt {
    font-size: 0.64rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-weight: bold;
  }
}

.withdrawal_amt {
  padding: 0 0.32rem;
  box-sizing: border-box;
  font-size: 0.28rem;

  div:first-child {
    font-size: 0.32rem;
    font-weight: bold;
  }

  div:last-child {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.2rem;

    span {
      font-size: 0.28rem;
      // font-weight: bold;
      color: #f32a23;
      padding-top: 0.2rem;
    }

    input {
      width: 70%;
      border: none;
      background: transparent;
      font-size: 0.32rem;
      margin-top: 0.1rem;
    }
  }
}

.withdrawal_accont {
  // width: 100%;
  box-sizing: border-box;
  font-size: 0.28rem;

  .account_title {
    padding: 0.32rem;
    // padding: .2rem 0;
    font-size: 0.32rem;
  }

  div:first-child {
    font-weight: bold;
    // margin-top: .32rem;
  }
}

.cell_title {

  // font-weight: 400;
  img {
    width: 0.6rem;
    vertical-align: middle;
    margin-right: 0.24rem;
    // padding-top: 0.1rem;
  }

  span {
    margin-top: 0.02rem;
  }
}

.flex-container {
  display: flex;
  /* 使用 Flexbox */
  align-items: center;
  /* 垂直居中对齐 */
}

.cell_right {
  display: flex;
  /* 使用 Flexbox */
  justify-content: space-between;
  /* 水平分布 */
  align-items: center;
  /* 垂直居中对齐 */
  font-weight: 400;
}

// .cell_right {
//   margin-right: 0.2rem;
//   font-weight: 400;
//   margin-top: 3px;
// }

.tips {
  width: 95%;
  margin: 0 auto;
  font-size: 0.28rem;

  .tips_title {
    font-weight: bold;
  }

  .tips_content {
    margin-top: 0.2rem;
    line-height: 0.5rem;
    font-size: 0.24rem;
    color: #666;
  }
}

.balance-pay-popup-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  text-align: center;
  padding: 0.32rem;
  box-sizing: border-box;

  .title {
    color: #1b1b1b;
    font-size: 0.36rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }

  .row {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ebedf0;

    &.border-none {
      border: none;
    }
  }

  .van-password-input {
    width: 100%;
    margin: 0;
  }
}
</style>
